<template>
	<el-dialog
	  title="新增"
	  :visible.sync="dialogVisible"
	  width="60%"
	  :append-to-body="true">	  
	  <div>
		  	<div data="基本信息">
			  	<div class="title">
			  	     基本信息
			  	</div>			  	
			  	<div>
					<el-row>
					  <el-col :span="16">
					  	<el-row>
					  		<el-col :span="6">
					  			<div class="input_wrap">
						  			<div class="input_title">姓名</div>
						  			<div><el-input v-model="input" placeholder="请输入姓名" size="small"></el-input></div>
					  			</div>
					  		</el-col>
					  		<el-col :span="6">
					  			<div class="input_wrap">
						  			<div class="input_title">性别</div>
						  			<div>
									  <el-select v-model="value" placeholder="请选择性别" size="small">
									    <el-option label="男" value="1"></el-option>
									    <el-option label="女" value="2"></el-option>
									  </el-select>				  				
						  			</div>
					  			</div>			  			
					  		</el-col>
					  		<el-col :span="6">
					  			<div class="input_wrap">
						  			<div class="input_title">年龄</div>
						  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
					  			</div>			  			
					  		</el-col>
					  		<el-col :span="6">
					  			<div class="input_wrap">
						  			<div class="input_title">民族</div>
						  			<div><el-input v-model="input" placeholder="请输入民族" size="small"></el-input></div>
					  			</div>			  			
					  		</el-col>			  		
					  	</el-row>
					  	
					  	<el-row>
					  	<el-row>
					  		<el-col :span="6">
					  			<div class="input_wrap">
						  			<div class="input_title">姓名</div>
						  			<div><el-input v-model="input" placeholder="请输入姓名" size="small"></el-input></div>
					  			</div>
					  		</el-col>
					  		<el-col :span="6">
					  			<div class="input_wrap">
						  			<div class="input_title">性别</div>
						  			<div>
									  <el-select v-model="value" placeholder="请选择性别" size="small">
									    <el-option label="男" value="1"></el-option>
									    <el-option label="女" value="2"></el-option>
									  </el-select>				  				
						  			</div>
					  			</div>			  			
					  		</el-col>
					  		<el-col :span="6">
					  			<div class="input_wrap">
						  			<div class="input_title">年龄</div>
						  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
					  			</div>			  			
					  		</el-col>
					  		<el-col :span="6">
					  			<div class="input_wrap">
						  			<div class="input_title">民族</div>
						  			<div><el-input v-model="input" placeholder="请输入民族" size="small"></el-input></div>
					  			</div>			  			
					  		</el-col>			  		
					  	</el-row>		  		
					  	</el-row>
					  </el-col>
					  <el-col :span="8">
					  	<el-row>
					  		<el-col :span="12">
					  			<div class="input_wrap2">
									<el-upload
									  action="https://jsonplaceholder.typicode.com/posts/"
									  list-type="picture-card"
									  :on-preview="handlePictureCardPreview"
									  :on-remove="handleRemove">
									  <i class="el-icon-plus"></i>
									  <div class="el-upload__tip" slot="tip" style="text-align: center;">证件照</div>
									</el-upload>	
								</div>
					  		</el-col>
					  		<el-col :span="12">
					  			<div class="input_wrap2">
									<el-upload
									  action="https://jsonplaceholder.typicode.com/posts/"
									  list-type="picture-card"
									  :on-preview="handlePictureCardPreview"
									  :on-remove="handleRemove">
									  <i class="el-icon-plus"></i>
									  <div class="el-upload__tip" slot="tip" style="text-align: center;">人脸照</div>
									</el-upload>
								</div>
					  		</el-col>			  		
					  	</el-row>
					  </el-col>
					</el-row>	  		
			  	</div>
			  	
			  	
			  	<div>	  		
			  		<el-row>
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">民族</div>
					  			<div><el-input v-model="input" placeholder="请输入民族" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">民族</div>
					  			<div><el-input v-model="input" placeholder="请输入民族" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>	
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">民族</div>
					  			<div><el-input v-model="input" placeholder="请输入民族" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>
				  		<el-col :span="8">
				  			<div class="input_wrap">
					  			<div class="input_title">民族</div>
					  			<div><el-input v-model="input" placeholder="请输入民族" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>				  		
			  		</el-row>
			  	</div>
		  	</div>
		  	
		  	
		  	<div data="项目信息">
			  	<div class="title title2">
			  	    项目信息
			  	</div>
			  	
			  	<div>
				  	<el-row>
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">姓名</div>
					  			<div><el-input v-model="input" placeholder="请输入姓名" size="small"></el-input></div>
				  			</div>
				  		</el-col>
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">性别</div>
					  			<div>
								  <el-select v-model="value" placeholder="请选择性别" size="small">
								    <el-option label="男" value="1"></el-option>
								    <el-option label="女" value="2"></el-option>
								  </el-select>				  				
					  			</div>
				  			</div>			  			
				  		</el-col>
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">年龄</div>
					  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">民族</div>
					  			<div><el-input v-model="input" placeholder="请输入民族" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>		
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">年龄</div>
					  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>
				  		<el-col :span="4">
			  			<div class="input_wrap">
				  			<div class="input_title">民族</div>
				  			<div><el-input v-model="input" placeholder="请输入民族" size="small"></el-input></div>
			  			</div>			  			
			  		</el-col>			  		
			  	</el-row>		  		  		
		  	</div>	  		  	
		  	
		  	<div>
			  	<el-row>
			  		<el-col :span="4">
			  			<div class="input_wrap">
				  			<div class="input_title">姓名</div>
				  			<div><el-input v-model="input" placeholder="请输入姓名" size="small"></el-input></div>
			  			</div>
			  		</el-col>
			  		<el-col :span="7">
			  			<div class="input_wrap">
				  			<div class="input_title">年龄</div>
				  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
			  			</div>			  			
			  		</el-col>
			  		<el-col :span="7">
			  			<div class="input_wrap">
				  			<div class="input_title">年龄</div>
				  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
			  			</div>			  			
			  		</el-col>		  		
			  	</el-row>		  		  		
		  	</div>	 	  		  	
		  </div>
		  
		  	<div data="其他">
			  	<div class="title title2">
			  	    其他
			  	</div>
			  	
			  	<div>
				  	<el-row>
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">姓名</div>
					  			<div><el-input v-model="input" placeholder="请输入姓名" size="small"></el-input></div>
				  			</div>
				  		</el-col>
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">性别</div>
					  			<div>
								  <el-select v-model="value" placeholder="请选择性别" size="small">
								    <el-option label="男" value="1"></el-option>
								    <el-option label="女" value="2"></el-option>
								  </el-select>				  				
					  			</div>
				  			</div>			  			
				  		</el-col>
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">年龄</div>
					  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>
				  		<el-col :span="8">
				  			<div class="input_wrap">
					  			<div class="input_title">民族</div>
					  			<div><el-input v-model="input" placeholder="请输入民族" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>		
				  		<el-col :span="4">
				  			<div class="input_wrap">
					  			<div class="input_title">年龄</div>
					  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>		  		
			  	    </el-row>		  		  		
		  	    </div>	  		  	
		  	
			  	<div>
				  	<el-row>
				  		<el-col :span="8">
				  			<div class="input_wrap">
					  			<div class="input_title">年龄</div>
					  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>
				  		<el-col :span="8">
				  			<div class="input_wrap">
					  			<div class="input_title">年龄</div>
					  			<div><el-input v-model="input" placeholder="请输入年龄" size="small"></el-input></div>
				  			</div>			  			
				  		</el-col>		  		
				  	</el-row>		  		  		
			  	</div>	 	  		  	
		  </div>
	  
	  	  
		  	<div data="备注">
			  	<div class="title title2">
			  	    备注
			  	</div>
			  	
			  	<div style="margin-top: 10px;">
                    <el-input type="textarea" rows="4"></el-input>	  					  	   	  		  		
		  	    </div>	  		  	
		   	  		  	
		  </div>
	  	  
	    </div>
	    <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
	    </span>
	</el-dialog>	
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      }
    },
    methods: {
      showWin(){
      	this.dialogVisible=true
      }
    }
  };
</script>

<style scoped="" lang="scss">
@import './reset.css';
$color: #333; 
$fontSizeTitle: 16px; 
.title{
	color:$color;
	font-size: $fontSizeTitle;
	border-bottom: 1px solid #e9e9e9;
	padding-bottom: 20px;
}
.title2{padding-top: 20px;}
.input_wrap{padding:10px 15px 0px 0;
   .input_title{margin-bottom: 10px;}
}
.input_wrap2{display: flex;align-items: center;padding-top: 10px;justify-content: center;}

</style>